<template>
    <div class="container">
      <div class="change-input">
        <h2 v-if="!showResetPassword" class="title">请输入账号和密码</h2>
        <div v-if="!showResetPassword" class="input-group">
          <span>请输入需要修改账号</span>
          <el-input 
            v-model="account" 
            class="input-field"
            placeholder="请输入账号" 
          />
        </div>
        <div v-if="!showResetPassword" class="input-group">
          <span>请输入密码</span>
          <el-input 
            v-model="password" 
            class="input-field"
            placeholder="请输入密码" 
            type="password"
          />
        </div>
        <el-button v-if="!showResetPassword" type="primary" class="submit-button" @click="login">确认</el-button>
  
        <!-- 修改密码区域 -->
        <div v-if="showResetPassword" class="reset-password">
          <h2 class="title">重置密码</h2>
          <div class="input-group">
            <span>请输入账号的新密码</span>
            <el-input 
              v-model="newPassword" 
              class="input-field"
              placeholder="请输入新密码" 
              type="password" 
              @blur="validateNewPassword"
            />
            <p v-if="newPasswordError" class="error">密码必须包含数字、字母和特殊字符，长度为8-16位</p>
          </div>
          <div class="input-group">
            <span>请确认账号的新密码</span>
            <el-input 
              v-model="confirmPassword" 
              class="input-field"
              placeholder="请确认新密码" 
              type="password" 
              @blur="validateConfirmPassword"
            />
            <p v-if="confirmPasswordError" class="error">两次输入的密码不一致</p>
          </div>
          <el-button type="primary" class="submit-button" @click="submitForm">提交</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  import request from '@/utils/request';
  import { ElMessage } from "element-plus";
  import { useRouter } from 'vue-router';
  import { useAuthStore } from '@/stores/user';

  const router = useRouter()
  const authStore = useAuthStore()
  
  const account = ref('');
  const password = ref('');
  const newPassword = ref('');
  const confirmPassword = ref('');
  
  const showResetPassword = ref(false);
  
  const newPasswordError = ref(false);
  const confirmPasswordError = ref(false);
  const id = ref('');
  
  const validateNewPassword = () => {
    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,16}$/;
    newPasswordError.value = !passwordRegex.test(newPassword.value);
  };
  
  const validateConfirmPassword = () => {
    confirmPasswordError.value = newPassword.value !== confirmPassword.value;
  };
  
  const login = () => {
    request.post("/user/login", {
      username: account.value,
      password: password.value,
    }).then(res => {
            if (res.data.status!== "fail") {
                  // 勾选记住我的逻辑，存储到本地
              localStorage.setItem('username', account.value);
              localStorage.setItem('password', password.value);
              localStorage.setItem('isLoggedIn', 'true'); // 标记用户已登录
              //上传store
              authStore.setAuthData(res.data);
              // id.value = res.data.user.id;
              showResetPassword.value = true
              ElMessage.success("登录成功，请修改密码");
              } else {
                ElMessage.error("用户名或密码不正确");
              }
        }).catch(err => {
      console.error('接口调用失败', err);
    });
  };
  
  const submitForm = () => {
    validateNewPassword();
    validateConfirmPassword();
  
    if (!newPasswordError.value && !confirmPasswordError.value) {
        // 开始调用接口
      request.post("/user/updateUserPassword",{
        id:id.value,
        oldPassword: password.value,
        newPassword:newPassword.value,
      }).then(res=>{
        if (res.status === 200) {
          ElMessage.success("修改成功，即将跳转首页");
            router.push('/')
        }
      })
    } else {
    }
  };
  </script>
  
  <style scoped>
  /* 样式同之前 */
  </style>
  
  
  <style scoped>
  .container {
    width: 100vw;
    height: 100vh;
    background-color: #eaf4fc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .change-input {
    width: 400px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    color: #333;
  }
  
  .input-group {
    margin-bottom: 15px;
    /* text-align: center; */
  }
  
  .input-group span {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #555;
  }
  
  .input-field {
    width: 100%;
  }
  
  .submit-button {
    width: 100%;
    margin-top: 10px;
  }
  
  .error {
    color: red;
    font-size: 12px;
    margin-top: 5px;
  }
  </style>
  